<template>
  <div class="tgtk">
    <div class="tjcpym" :class="$store.state.tgtk==true?'gl_tjym':''">
      <div class="tjcpym_title" v-if="$store.state.tgtk">
        <h3>推广产品</h3>
        <a-icon @click="quxiao" type="close" />
      </div>
      <div class="tjcpym_tab">
        <div class="tg_box">
          <ul>
            <li>
              <span class="tit">电脑版链接：</span>
              <a-input class="tg_inp" placeholder="http://" />
              <span>
                <a-button>复制</a-button>
              </span>
            </li>
            <li>
              <span class="tit">手机版链接：</span>
              <a-input class="tg_inp" placeholder="http://" />
              <span>
          
                <a-button>复制</a-button>
              </span>
            </li>
            <li>
              <p>海报/二维码</p>
              <div class="tg_upimg">
                <div class="img">
                  <div>
                    <img class="img1" src="../../img/vip.png" alt />
                    <span>111</span>
                  </div>
                  <div class="rger">
                    <div class="mon">￥110</div>
                    <div>
                      <img class="img2" src="../../img/login.png" alt />
                      <span>扫描或长按二维码</span>
                    </div>
                  </div>
                </div>
                <div class="upload">
                  <a-button>
                    <a-icon type="download" />下载图文海报
                  </a-button>
                  <a-button>
                    <a-icon type="download" />下载二维码
                  </a-button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import qs from "qs";
//上传图片
function getBase64(img, callback) {
  const reader = new FileReader();
  let file = [];
  file = reader;
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
  sessionStorage.setItem("file", reader);
}
export default {
  inject: ["reload"],

  data() {
    return {};
  },
  components: {},
  methods: {
    quxiao() {
      this.$store.state.tgtk = false;
      this.$store.state.xiugaiflag = "";
    }
  },

  created() {}
};
</script>

<style lang='less' scoped>
.tgtk {
  .gl_tjym {
    width: 60% !important;
  }
}
.ant-calendar-picker-container {
  z-index: 99999 !important;
}
.tjcpym {
  width: 98%;
  margin: 0 auto;
  position: relative;
  top: 20px;
  text-align: left;
  background-color: #fff;

  .ant-tabs-nav-container {
    line-height: 0 !important;
  }
  .tjcpym_tab {
    position: relative;
    width: 100%;
    padding: 0px 20px;
    .tg_box {
      ul {
        li {
          .tit {
            display: inline-block;
            width: 100px;
            text-align: right;
          }
          margin: 15px 0;
          .tg_inp {
            width: 500px;
            margin: 0 10px;
          }
          .tg_upimg {
            width: 53%;
            display: flex;
            justify-content: space-between;
            margin: 0 20px;
            .img {
              position: relative;
              width: 100%;
              height: 350px;
              box-shadow: 0 0 5px #ccc;
              padding: 20px;
              .img1 {
                width: 100%;
                height: 150px;
              }
              .rger {
                display: flex;
                justify-content: space-between;
                width: 100%;
                text-align: right;
                align-items: center;
                .mon {
                  font-size: 18px;
                }
                .img2 {
                  display: block;
                  margin-top: 20px;
                  width: 35%;
                  height: 55px;
                  margin: 0 65%;
                }
              }
            }
            .upload{
                margin-left: 50px;
                button{
                    margin: 10px 0;
                    width: 200px;
                }
            }
          }
        }
      }
    }
  }
}
</style>
